<template>
  <view class="">
    <!-- 头部选择 -->
    <view class="margin12">
      <view class="select bgcfff marginTop15 borderR12">
        <img src="../../static/swiper1.png" alt="" />
        <text>微信定制</text>
        <view class="right" @tap="changePicker"> 选择&nbsp;&nbsp;> </view>
      </view>
    </view>
    <van-picker v-show="showPicker" @cancel="cancel" class="picker" show-toolbar title="请选择APP" :columns="columns" />
    <!-- 选择卡密签名 -->
    <van-tabs type="card" color="#3276F3" background="#C9D0E0" class="marginTop15">
      <!-- 卡密签名 -->
      <van-tab title-class="fs14  colorfff" title="卡密签名">
        <view class="signature margin12 bgcfff borderR12 marginTop15">
          <uni-forms-item label="UUID" label-width="100" required>
            <uni-easyinput v-model="uuid" placeholder="请输入" />
            <span class="one">获取UUID</span>
          </uni-forms-item>
          <uni-forms-item label="签名码" label-width="100" required>
            <uni-easyinput v-model="code" placeholder="请输入" />
            <span class="two" @tap="toBuy">购买签名码</span>
          </uni-forms-item>
        </view>
      </van-tab>
      <!-- 已有证书 -->
      <van-tab title-class="fs14  colorfff" title="已有证书">
        <view class="upload marginTop15 margin12 borderR12 bgcfff">
          <van-uploader v-model="fileList" multiple />
        </view>
      </van-tab>
      <!-- 免费试用 -->
      <van-tab title-class="fs14  colorfff" title="免费证书">
        <view class="warning marginTop15 margin12 borderR12 padding17 bgcfff"> 免费证书的稳定性差，一般几天至2周时间，用于软件的测试，自用推荐购买正规证书! </view>
      </van-tab>
    </van-tabs>
    <!-- 修改app信息 -->
    <view class="marginTop15 margin12 bgcfff borderR12 overflowH">
      <uni-collapse-item title="修改app信息 (非必填)" thumb="../../static/app.png">
        <view class="appContent">
          <view class="logo">
            <span>更换LOGO</span>
            <view class="image"> <img src="../../static/logo1.png" alt="" />&gt; </view>
          </view>
          <uni-forms-item label="APP名称" label-width="100">
            <uni-easyinput v-model="appName" placeholder="请输入 (选填)" />
          </uni-forms-item>
          <uni-forms-item label="包名" label-width="100">
            <uni-easyinput v-model="packageName" placeholder="请输入 (选填)" />
          </uni-forms-item>
        </view>
      </uni-collapse-item>
    </view>
    <!-- 多开 -->
    <view class="duokai marginTop15 margin12 bgcfff borderR12 padding17">
      <uni-forms-item label="多开加序号" label-width="100">
        <van-switch class="switch" v-model="checked" size="20" />
      </uni-forms-item>
      <uni-forms-item label="多开数量" label-width="100">
        <uni-easyinput v-model="packageName" placeholder="请输入" />
      </uni-forms-item>
    </view>
  </view>
</template>

<script>
import { Picker, Tab, Tabs, Switch } from 'vant';
export default {
  components: {
    [Picker.name]: Picker,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Switch.name]: Switch,
  },
  data() {
    return {
      showPicker: false,
      imageStyles: {
        width: 64,
        height: 64,
        border: {
          radius: '50%',
        },
      },
      listStyles: {
        // 是否显示边框
        border: true,
        // 是否显示分隔线
        dividline: true,
        // 线条样式
        borderStyle: {
          width: 1,
          color: 'blue',
          style: 'dashed',
          radius: 2,
        },
      },
      columns: [
        // 第一列
        {
          values: ['周一', '周二', '周三', '周四', '周五'],
          defaultIndex: 2,
        },
        // 第二列
        {
          values: ['上午', '下午', '晚上'],
          defaultIndex: 1,
        },
      ],
      uuid: '',
      code: '',
      appName: '',
      packageName: '',
      checked: true,
      fileList: [],
    };
  },
  methods: {
    // 打开选择
    changePicker() {
      this.showPicker = true;
    },
    cancel() {
      this.showPicker = false;
    },
    toBuy() {
      uni.navigateTo({
        url: `/pages/make/buy`,
      });
    },
  },
};
</script>

<style lang="scss">
.select {
  display: flex;
  padding: 26upx;
  color: #888888;

  img {
    width: 132upx;
    height: 132upx;
    border-radius: 16upx;
  }

  text {
    display: flex;
    align-items: center;
    margin-left: 24upx;
  }

  .right {
    display: flex;
    align-items: center;
    margin-left: 260upx;
  }
}

.picker {
  position: absolute;
  width: 100%;
  bottom: 0;
  border-radius: 36upx;
}

// 卡密、证书
.signature {
  position: relative;
  padding: 20upx 32upx 2upx 32upx;

  span {
    position: absolute;
    right: 0;
    top: 10upx;
    padding: 6upx 20upx;
    border-radius: 24upx;
    // background-color: #0256FF;
  }

  .one {
    color: #0256ff;
    font-weight: 500;
    border: 2upx solid #0256ff;
  }

  .two {
    color: #fff;
    background-color: #ea0000;
  }
}

.upload {
  position: relative;
  height: 260upx;
  display: flex;
  align-items: center;
  padding-left: 40upx;
}

/deep/.van-image__loading,
/deep/.van-uploader__preview-image,
/deep/.van-uploader__upload {
  // width: 168upx;
  // height: 168upx;
  // margin-top: 20upx;
  border-radius: 26upx;
}
/deep/.van-uploader__upload::after {
  content: '上传证书';
  position: absolute;
  width: 60px;
  height: 20px;
  left: 30upx;
  bottom: 10upx;
  font-size: 24upx;
  color: #a0acc6;
  font-weight: 500;
}
/deep/.van-icon-photograph:before {
  content: '';
  width: 50upx;
  height: 50upx;
  background-image: url('../../static/icon/upload.svg');
}

.warning {
  position: relative;
  padding-top: 20upx;
  padding-bottom: 20upx;
  padding-left: 65upx;
  color: #ff0707;

  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 30upx;
    height: 30upx;
    left: 24upx;
    top: 30upx;
    background-image: url('../../static/icon/error.png');
    background-size: 100%;
  }
}

// 修改app信息
.appContent {
  padding-left: 32upx;
  .logo {
    display: flex;
    height: 100upx;

    span {
      line-height: 100upx;
      color: #606266;
      font-weight: 600;
    }

    .image {
      margin-left: 360upx;
      display: flex;
      align-items: center;

      img {
        margin-right: 20upx;
      }
    }
  }
}

// 多开
.duokai {
  position: relative;
  box-sizing: border-box;
  padding-top: 36upx;
  padding-bottom: 2upx;

  .switch {
    position: absolute;
    display: flex;
    right: 0;
    top: 10upx;
  }
}
</style>
